<template>
  <div class="supporting-facilities">
    <div class="facility-grid">
      <div 
        v-for="facility in facilityList" 
        :key="facility.key"
        class="facility-item"
        :class="{ 'active': isActive(facility.key) }"
      >
        <div class="facility-icon">
          <div v-html="facility.iconSvg"></div>
        </div>
        <div class="facility-name">{{ facility.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  facilities: {
    type: Array,
    default: () => []
  }
})

// 配套设施配置列表
const facilityList = [
  { 
    key: '客梯', 
    name: '客梯', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" style="fill: currentColor;">
      <g>
      <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect>
      <path d="M42 41V7H6V41H42Z" fill="none"></path>
      <path d="M42 7V41M42 7H4H6V41M42 7H44M42 41H44M42 41H6M6 41H4" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      <path d="M24 7V41" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      <path d="M33 20V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      <path d="M30 23L33 20L36 23" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      <path d="M15 28V20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      <path d="M12 25L15 28L18 25" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
      </g>
    </svg>`
  },
  { 
    key: '货梯', 
    name: '货梯', 
    iconSvg: `<svg viewBox="0 0 1024 1024" style="fill: currentColor;">
      <path d="M511.7 236a20 20 0 0 1-20-20v-67a20 20 0 0 1 40 0v67a20 20 0 0 1-20 20z" fill="currentColor"></path>
      <path d="M771.29 856H252.12a48.47 48.47 0 0 1-48.42-48.42V244.42A48.47 48.47 0 0 1 252.12 196h519.17a48.46 48.46 0 0 1 48.41 48.42v563.16A48.46 48.46 0 0 1 771.29 856zM252.12 236a8.43 8.43 0 0 0-8.42 8.42v563.16a8.43 8.43 0 0 0 8.42 8.42h519.17a8.42 8.42 0 0 0 8.41-8.42V244.42a8.42 8.42 0 0 0-8.41-8.42z" fill="currentColor"></path>
      <path d="M511.69 738.67a29 29 0 0 1-7.46-1L471.55 729l-26.24 6.62a28.9 28.9 0 0 1-36-28V605.67a20 20 0 0 1 20-20h164.75a20 20 0 0 1 20 20v101.94a28.89 28.89 0 0 1-35.86 28L551.31 729l-32.06 8.69a28.92 28.92 0 0 1-7.56 0.98z m-40.06-50.07a28.86 28.86 0 0 1 7.45 1l32.58 8.7 32-8.67a29 29 0 0 1 14.54-0.16l15.9 4v-67.8H449.35v67.65l15.21-3.84a28.59 28.59 0 0 1 7.07-0.88z m116.22 8.23z" fill="currentColor"></path>
      <path d="M688.72 845.78a20 20 0 0 1-20-20V635.93a9.94 9.94 0 0 0-9.93-9.93H364.62a9.94 9.94 0 0 0-9.93 9.93v189.85a20 20 0 0 1-40 0V635.93A50 50 0 0 1 364.62 586h294.17a50 50 0 0 1 49.93 49.93v189.85a20 20 0 0 1-20 20zM511.69 506.67a29 29 0 0 1-7.46-1L471.55 497l-26.24 6.62a28.9 28.9 0 0 1-36-28V367a20 20 0 0 1 20-20h164.75a20 20 0 0 1 20 20v108.61a28.89 28.89 0 0 1-35.86 28L551.31 497l-32.06 8.69a28.92 28.92 0 0 1-7.56 0.98z m-40.06-50.07a28.86 28.86 0 0 1 7.45 1l32.58 8.7 32-8.67a29 29 0 0 1 14.54-0.16l15.9 4V387H449.35v74.32l15.21-3.84a28.59 28.59 0 0 1 7.07-0.88z m116.22 8.23z" fill="currentColor"></path>
      <path d="M663.05 625.78H360.36c-25.18 0-45.67-21.48-45.67-47.88V399.51c0-28.95 22.4-52.51 49.93-52.51h294.17c27.53 0 49.93 23.56 49.93 52.51V577.9c0 26.4-20.49 47.88-45.67 47.88zM364.62 387c-5.38 0-9.93 5.73-9.93 12.51V577.9c0 4.65 3 7.88 5.67 7.88h302.69c2.68 0 5.67-3.23 5.67-7.88V399.51c0-6.78-4.55-12.51-9.93-12.51z" fill="currentColor"></path>
    </svg>`
  },
  { 
    key: '中央空调', 
    name: '中央空调', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    <g>
    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><path d="M24 4V44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M6.72461 14L41.3656 34" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M6.71923 33.9773L41.2814 14.0228" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M12 10L15 19L6 21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M6 27L15 29L12 38" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M36 10L33 19L42 21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M42 27L33 29L36 38" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 7L24 13L30 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 41L24 35L30 41" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
    </g>
  </svg>`
  },
  { 
    key: '暖气', 
    name: '暖气', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468490412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5614" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M682.666667 277.333333V192a85.333333 85.333333 0 1 1 170.666666 0v85.333333h42.666667a21.333333 21.333333 0 0 1 0 42.666667h-42.666667v512a85.333333 85.333333 0 1 1-170.666666 0V320h-64v512a85.333333 85.333333 0 1 1-170.666667 0V320h-64v512a85.333333 85.333333 0 1 1-170.666667 0V320H149.333333a21.333333 21.333333 0 0 1 0-42.666667h64V192a85.333333 85.333333 0 1 1 170.666667 0v85.333333h64V192a85.333333 85.333333 0 1 1 170.666667 0v85.333333h64zM298.666667 149.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v640a42.666667 42.666667 0 1 0 85.333333 0V192a42.666667 42.666667 0 0 0-42.666666-42.666667z m234.666666 0a42.666667 42.666667 0 0 0-42.666666 42.666667v640a42.666667 42.666667 0 1 0 85.333333 0V192a42.666667 42.666667 0 0 0-42.666667-42.666667z m234.666667 0a42.666667 42.666667 0 0 0-42.666667 42.666667v640a42.666667 42.666667 0 1 0 85.333334 0V192a42.666667 42.666667 0 0 0-42.666667-42.666667z" fill="currentColor" p-id="5615"></path></svg>`
  },
  { 
    key: '扶梯', 
    name: '扶梯', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    
    <g>
    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><path d="M35 13L13 35H4V44H13L35 22H44V13H35Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 13L28 4" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M22 4H28V10" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M14 18L5 27" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M11 27H5V21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
    </g>
  </svg>`
  },
  { 
    key: '上水', 
    name: '上水', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468573164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7743" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1012.224c-275.968 0-500.224-224.256-500.224-500.224C11.776 236.032 236.032 11.776 512 11.776c275.968 0 500.224 224.256 500.224 500.224 0 275.968-224.256 500.224-500.224 500.224z m0-949.248c-247.808 0-449.024 201.216-449.024 449.024s201.216 449.024 449.024 449.024 449.024-201.216 449.024-449.024-201.216-449.024-449.024-449.024z" fill="currentColor" p-id="7744"></path><path d="M593.408 797.696c-62.464 0-113.152-50.688-113.152-113.152 0-57.856 90.112-155.136 100.352-165.888l12.8-13.824 12.8 13.824c10.24 10.752 100.352 108.032 100.352 165.888 0 62.464-50.688 113.152-113.152 113.152z m0-240.128c-34.304 38.912-77.312 97.792-77.312 126.976 0 42.496 34.816 77.312 77.312 77.312S670.72 727.04 670.72 684.544c0-29.184-43.52-88.064-77.312-126.976z" fill="currentColor" p-id="7745"></path><path d="M544.256 244.224H133.12l-20.48 37.888 431.104-0.512c28.16 0 55.296 11.776 75.264 32.256 20.48 20.48 31.232 48.128 31.232 76.8v102.4h-113.152v-3.584c0-29.184-24.064-54.272-53.248-54.272H61.952l-19.968 37.888h441.856c8.704 0 15.872 6.656 15.872 15.872v4.096l-0.512 37.888h189.44V390.656c0-80.896-65.024-146.432-144.384-146.432z" fill="currentColor" p-id="7746"></path></svg>`
  },
  { 
    key: '管煤', 
    name: '管煤', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468532273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6671" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M292.565333 83.584c-20.181333 0-36.565333 18.730667-36.565333 41.813333 0 23.082667 16.384 41.792 36.565333 41.792h109.717334v-1.301333h219.434666v1.28h109.717334c20.181333 0 36.565333-18.688 36.565333-41.770667 0-23.082667-16.384-41.813333-36.565333-41.813333H292.565333z m109.717334 167.189333h-109.717334c-60.586667 0-109.717333-56.128-109.717333-125.376C182.848 56.106667 231.978667 0 292.565333 0h438.869334c60.586667 0 109.717333 56.128 109.717333 125.397333 0 69.248-49.130667 125.376-109.717333 125.376h-109.717334v104.490667h105.130667c63.146667 0 114.304 58.474667 114.304 130.624v36.565333h146.282667c20.181333 0 36.565333 18.709333 36.565333 41.792v417.962667C1024 1005.290667 1007.616 1024 987.434667 1024H36.565333C16.384 1024 0 1005.290667 0 982.186667V564.266667c0-23.082667 16.384-41.813333 36.565333-41.813334h146.282667v-36.544c0-72.149333 51.178667-130.624 114.304-130.624h105.130667v-104.490666z m73.152 0v104.490667h73.130666v-104.490667h-73.130666z m-73.152 188.074667H297.173333c-22.741333 0-41.152 21.056-41.152 47.04v36.565333h512v-36.565333c0-25.984-18.410667-47.04-41.152-47.04H402.282667zM73.173333 606.037333v334.378667h73.130667V606.037333H73.173333z m146.282667 334.378667h585.130667V606.037333H219.434667v334.378667z m658.282667 0h73.130666V606.037333h-73.130666v334.378667z" fill="currentColor" p-id="6672"></path></svg>`
  },
  { 
    key: '380V', 
    name: '380V', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    <g>
    <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" stroke-width="4"></circle><path d="M23 14L18 24H30L25 34" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
    </g>
  </svg>`
  },
  { 
    key: '可明火', 
    name: '可明火', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    <g>
    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><path d="M36 21C36 28.1797 30.1797 34 23 34C15.8203 34 10 28.1797 10 21C10 13.8203 15 11 17 4C25 7.49989 25 18 25 18C25 18 27 12 33 10.5C33.5 16 36 17.9342 36 21Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M7 36L39 44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M7 44L39 36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
    </g>
  </svg>`
  },
  { 
    key: '停车位', 
    name: '停车位', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    <g>
    <path d="M24 44C24 44 40 32 40 19C40 10.7157 32.8366 4 24 4C15.1634 4 8 10.7157 8 19C8 32 24 44 24 44Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M21 14V30" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M21 14H27C29.2091 14 31 15.7909 31 18V18C31 20.2091 29.2091 22 27 22H21V14Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path>
    </g>
  </svg>`
  },
  { 
    key: '天然气', 
    name: '天然气', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    <g>
    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M23.1466 44C31.2933 44 40 43.0106 40 30.1802C40 23.9643 38.5085 18.9042 35.5256 15C32.7392 19.6667 30.674 22 29.3299 22C27.3139 22 29.3299 15.9107 26.9987 11.2914C25.4445 8.21194 22.6879 5.78146 18.7289 4C19.2794 8.43691 19.1603 11.6554 18.3715 13.6554C17.1882 16.6554 7.15114 21.91 8.05783 30.9349C8.96453 39.9599 15 44 23.1466 44Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M21.7076 24.0083C17.9028 27.4666 16.2811 30.6674 16.8427 33.6109C17.3261 36.1448 19.2487 37.3764 20.6969 37.7735C21.8196 38.0814 23.7635 38.2536 25.5004 36.7067C27.3402 35.0682 26.6071 32.7388 23.9392 29.8571C22.8138 28.6415 22.0699 26.6919 21.7076 24.0083Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path>
    </g>
  </svg>`
  },
  { 
    key: '网络', 
    name: '网络', 
    iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="24" height="24" style="" filter="none">
    
    <g>
    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><path d="M4.00001 18.9653C4.58881 18.4073 5.19523 17.8786 5.81741 17.3792C17.0371 8.37423 33.3821 8.90292 44 18.9653" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M38 25.799C30.268 18.067 17.732 18.067 10 25.799" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M32 32.3137C27.5817 27.8954 20.4183 27.8954 16 32.3137" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24 40C25.3807 40 26.5 38.8807 26.5 37.5C26.5 36.1193 25.3807 35 24 35C22.6193 35 21.5 36.1193 21.5 37.5C21.5 38.8807 22.6193 40 24 40Z" fill="currentColor" stroke="none"></path>
    </g>
  </svg>`
  },
  { 
    key: '下水', 
    name: '下水', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468615591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8811" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1012.224c-275.968 0-500.224-224.256-500.224-500.224C11.776 236.032 236.032 11.776 512 11.776c275.968 0 500.224 224.256 500.224 500.224 0 275.968-224.256 500.224-500.224 500.224z m0-949.248c-247.808 0-449.024 201.216-449.024 449.024s201.216 449.024 449.024 449.024 449.024-201.216 449.024-449.024-201.216-449.024-449.024-449.024z" fill="currentColor" p-id="8812"></path><path d="M829.952 805.888c-40.96 0-78.848-16.896-105.984-45.568-27.136 28.672-65.024 45.568-105.984 45.568-41.472 0-79.872-17.408-107.008-46.592-27.136 29.184-65.536 46.592-107.008 46.592-40.96 0-78.848-16.896-105.984-45.568-27.136 28.672-65.024 45.568-105.984 45.568-31.744 0-61.44-9.728-86.528-28.16-24.064-17.92-42.496-43.52-51.2-71.68-3.584-11.776 3.072-24.576 15.36-28.16 12.288-3.584 25.088 3.072 28.672 14.848 6.144 18.944 18.432 36.352 34.816 48.64 16.896 12.288 37.376 18.944 58.88 18.944 35.84 0 68.608-18.944 85.504-49.664 4.096-7.168 11.776-11.776 20.48-11.776 8.192 0 16.384 4.608 20.48 11.776 17.408 30.72 50.176 49.664 85.504 49.664 36.352 0 69.12-19.456 86.528-50.688 4.096-7.168 11.776-11.776 20.48-11.776 8.704 0 16.384 4.608 20.48 11.776 16.896 31.232 50.176 50.688 86.528 50.688 35.84 0 68.608-18.944 85.504-49.664 4.096-7.168 11.776-11.776 20.48-11.776 8.192 0 16.384 4.608 20.48 11.776 17.408 30.72 50.176 49.664 85.504 49.664 21.504 0 41.472-6.656 58.368-18.944 16.384-12.288 28.672-29.184 34.816-48.128 3.584-11.776 16.896-18.432 29.184-14.848s18.944 16.384 15.36 28.672c-8.704 28.16-27.136 53.76-51.2 71.168-25.088 17.92-55.296 27.648-86.528 27.648zM417.792 257.536c17.92 21.504 38.4 47.616 56.32 74.24 39.936 59.392 48.64 92.672 48.64 110.592 0 27.648-10.752 53.76-30.72 73.216-19.968 19.456-46.592 30.208-74.24 30.208-28.16 0-54.784-10.752-74.24-30.208-19.968-19.456-30.72-45.568-30.72-73.216 0-16.384 7.68-48.128 43.52-102.912 18.944-29.696 41.472-57.856 61.44-81.92m-0.512-58.368c-43.008 51.2-143.36 165.376-143.36 243.2 0 77.824 64 140.288 143.36 140.288 78.848 0 143.36-62.976 143.36-140.288s-98.816-192-143.36-243.2z m285.184 303.104c22.016 0 39.424 17.408 39.424 38.912 0 21.504-17.92 38.912-39.424 38.912-22.016 0-39.424-17.408-39.424-38.912 0-20.992 17.92-38.912 39.424-38.912m0-36.864c-43.008 0-77.312 34.304-77.312 75.776 0 41.984 34.816 75.776 77.312 75.776s77.312-34.304 77.312-75.776-34.304-75.776-77.312-75.776z" fill="currentColor" p-id="8813"></path></svg>`
  },
  { 
    key: '排烟', 
    name: '排烟', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468641116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9823" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M350.208 354.304h323.072V214.528c0-20.48-16.384-36.864-36.864-36.864H387.072c-20.48 0-36.864 16.384-36.864 36.864v139.776z m376.32 19.968l263.68 245.76c5.632 5.12 8.704 12.8 8.192 20.992v194.048c0 49.664-39.936 89.6-89.6 89.6h-793.6c-49.664 0-89.6-39.936-89.6-89.6v-194.048c-0.512-7.168 2.048-14.848 8.192-20.48l263.68-245.76V214.528c0-49.664 39.936-89.6 89.6-89.6h249.344c49.664 0 89.6 39.936 89.6 89.6l0.512 159.744z m-42.496 32.768H339.968l-221.184 206.336h786.432l-221.184-206.336z m261.632 259.072H78.336v169.472c0 20.48 16.384 36.864 36.864 36.864h793.6c20.48 0 36.864-16.384 36.864-36.864v-169.472z" fill="currentColor" p-id="9824"></path></svg>`
  },
  { 
    key: '排污', 
    name: '排污', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468692070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10851" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 572.928H829.44c-13.312 0-25.088 11.776-25.088 25.088v56.32H358.4c-8.192 0-14.848-6.656-14.848-14.848V243.712h53.248c13.312 0 25.088-11.776 25.088-25.088V88.576c0-13.312-11.776-25.088-25.088-25.088H60.928c-13.312 0-25.088 11.776-25.088 25.088v130.048c0 13.312 11.776 25.088 25.088 25.088H112.64v455.68c0 101.376 81.408 182.784 182.784 182.784h508.928v53.248c0 13.312 11.776 25.088 25.088 25.088h130.56c13.312 0 25.088-11.776 25.088-25.088v-337.408c0-13.312-11.776-25.088-25.088-25.088zM86.016 113.664h286.208v80.384H86.016V113.664z m207.872 718.848c-73.216 0-133.12-59.904-133.12-133.12v-455.68H291.84v395.776c0 36.352 29.696 65.024 65.024 65.024h445.952v128H293.888z m641.024 77.824h-80.896v-287.744h80.896v287.744z" fill="currentColor" p-id="10852"></path></svg>`
  },
  { 
    key: '外摆区', 
    name: '外摆区', 
    iconSvg: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757468737497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11994" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M802.816 751.616v260.096h-49.152v-96.256H542.72v96.256h-59.392v-96.256H276.48v96.256H225.28V751.616H126.976v-49.152h354.304v-161.792l-49.152 24.576c-24.576 12.288-55.296 12.288-79.872 0L284.672 532.48c-8.192-4.096-18.432-4.096-26.624 0l-65.536 32.768c-24.576 12.288-55.296 12.288-79.872 0-32.768-16.384-51.2-47.104-51.2-81.92v-22.528c0-247.808 202.752-450.56 450.56-450.56s450.56 202.752 450.56 450.56v22.528c0 34.816-18.432 65.536-49.152 79.872-24.576 12.288-55.296 12.288-79.872 0L765.952 532.48c-8.192-4.096-18.432-4.096-26.624 0l-65.536 32.768c-24.576 12.288-55.296 12.288-79.872 0l-49.152-24.576v161.792H921.6v49.152h-118.784z m-49.152 0H542.72v114.688h210.944v-114.688z m-477.184 0v114.688h206.848v-114.688H276.48zM165.888 509.952l65.536-32.768c4.096-2.048 8.192-2.048 10.24-4.096 6.144-147.456 69.632-288.768 178.176-391.168-169.984 40.96-299.008 196.608-299.008 378.88v22.528c0 12.288 6.144 22.528 16.384 26.624 10.24 6.144 18.432 6.144 28.672 0z m239.616 0l65.536-32.768c4.096-2.048 6.144-2.048 10.24-4.096V106.496l-10.24 8.192c-102.4 92.16-163.84 221.184-167.936 360.448 4.096 2.048 6.144 2.048 10.24 4.096l65.536 32.768c8.192 4.096 18.432 4.096 26.624-2.048z m212.992 0c8.192 4.096 18.432 4.096 26.624 0l65.536-32.768c2.048-2.048 6.144-2.048 10.24-4.096-4.096-137.216-65.536-266.24-169.984-356.352l-10.24-8.192v366.592c4.096 2.048 6.144 2.048 10.24 4.096 2.048-2.048 67.584 30.72 67.584 30.72z m268.288 0c10.24-4.096 16.384-16.384 16.384-26.624v-22.528c0-184.32-126.976-337.92-299.008-378.88 108.544 100.352 174.08 241.664 178.176 391.168 4.096 2.048 8.192 2.048 10.24 4.096l65.536 32.768c10.24 6.144 18.432 6.144 28.672 0z" fill="currentColor" p-id="11995"></path></svg>`
  }
]

// 判断设施是否激活
const isActive = (facilityKey) => {
  return props.facilities.includes(facilityKey)
}
</script>

<style lang="scss" scoped>
.supporting-facilities {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  
  .facility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    .facility-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      border-radius: 8px;
      transition: all 0.3s ease;
      min-height: 60px;
      
      .facility-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        transition: color 0.3s ease;
        
        :deep(svg) {
          width: 100%;
          height: 100%;
          fill: currentColor;
          stroke: currentColor;
        }
      }
      
      .facility-name {
        font-size: 12px;
        color: #999;
        text-align: center;
        transition: color 0.3s ease;
        line-height: 1.2;
        word-break: keep-all;
        white-space: nowrap;
      }
      
      &.active {
        .facility-icon {
          color: #333;
        }
        
        .facility-name {
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

// 适配小屏幕
@media (max-width: 375px) {
  .supporting-facilities {
    .facility-grid {
      gap: 12px;
      
      .facility-item {
        padding: 8px 4px;
        
        .facility-icon {
          width: 24px;
          height: 24px;
          margin-bottom: 4px;
        }
        
        .facility-name {
          font-size: 11px;
        }
      }
    }
  }
}
</style>
